<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS布局</title>
    <style>
        body {
            width: 100%;
            --height: 1200px;
            margin: 0 auto;
            font-size: 12px;
        }

        .left-bar {
           position: fixed;
           height: 100%;
           width: 50px;
           background: #333333 
        }

        .nav-bar {
            width: 100%;
            margin-left: 50px;
            position: fixed;
            top: 0px;
            left: 0px;
            background: #19a3f4;
            height: 50px;
        }

        .bottom-ids {
            position: fixed;
            z-index: 999;
            right: 0;
            bottom: 0;
            width: 160px;
            height: 70px;
            padding: 15px;
            background: #19a3f4;
            font-size: 14px;
            color: #fff;
            line-height: 22px;
            text-align: center;
        }

        .left-bar a {
            text-align: center;
            text-decoration: none;
            color: #fff;
            padding: 13px;
            display: block;
        }

        .left-bar a:hover {
            color: #19a3f4;
        }

        .left-bar .up {
            position: relative;
        }

        .left-bar .down {
            position: absolute;
            bottom: 10px;
            width: 100%;
        }

        .content {
            position: fixed;
            width: 100%;
            margin-top: 60px;
            margin-left: 60px;
            height:800px;
            padding: 100px; 
            border:1px solid #19a3f4
        }
    </style>
</head>
<body>
    
    <div class="left-bar">

        <div class="up">
            <a href="#">首页</a>
            <a href="#">用户</a>
            <a href="#">新建</a>
            <a href="#">搜索</a>
        </div>
        <div class="down">
            <a href="#">退出</a>
            <a href="#">设置</a>
        </div>

    </div>
    <div class="nav-bar"></div>

    <div class="content">
        <audio id="audio-1">
            <source src="./test_data/sample.mp3" type="audio/mpeg">
        </audio>
        <audio id="audio-2">
            <source src="./test_data/TOL_6min_720p_download.mp3" type="audio/mpeg">
        </audio>
        <button id="play">播放</button>  <button id="stop">暂停</button>
    </div>

    <div class="bottom-ids" style="display: none">
        <b>科学SS上网 49/年</b>
        <br>
        <b>购买/试用请加QQ：123456789</b>
    </div>


    <script>
        window.onload = function() {
            var audio1 = document.getElementById('audio-1');
            var audio2 = document.getElementById('audio-2');
            var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性
            context = new AudioContext(), // 创建Audio上下文
            media = context.createMediaElementSource(audio1), // 从元素创建媒体节点
            lGain = context.createGain(),   // 左声道
            rGain = context.createGain(),   // 右声道
            splitter = context.createChannelSplitter(2),  // 分离器
            merger = context.createChannelMerger(2),    // 合成器
            vol = 100,    // 音量
            lVol = 100,     // 左声道
            rVol = 100;     // 右声道

            lGain.gain.value = 1;
            rGain.gain.value = 1;

            media.connect( splitter );
            splitter.connect( lGain, 0 );
            splitter.connect( rGain, 1 );
            lGain.connect( merger, 0, 0 );
            rGain.connect( merger, 0, 1 );
            merger.connect( context.destination );
            rGain.gain.value = 0;

            context2 = new AudioContext(), // 创建Audio上下文
            media2 = context2.createMediaElementSource(audio2), // 从元素创建媒体节点
            lGain2 = context2.createGain(),   // 左声道
            rGain2 = context2.createGain(),   // 右声道
            splitter2 = context2.createChannelSplitter(2),  // 分离器
            merger2 = context2.createChannelMerger(2),    // 合成器

            lGain2.gain.value = 1;
            rGain2.gain.value = 1;

            media2.connect( splitter2 );
            splitter2.connect( lGain2, 0 );
            splitter2.connect( rGain2, 1 );
            lGain2.connect( merger2, 0, 0 );
            rGain2.connect( merger2, 0, 1 );
            merger2.connect( context2.destination );
            lGain2.gain.value = 0;

            document.getElementById('play').addEventListener('click',function(){
                audio1.play();
                audio2.play();
            });

            document.getElementById('stop').addEventListener('click',function(){
                audio1.pause();
                // audio1.currentTime = 0;

                audio2.pause();
                // audio2.currentTime = 0;
            });

            // TODO 自定义audio播放按钮样式
           
        };
    </script>

</body>
</html>